<template>
	<view class="balance">
		<view class="balance_b">
			<view class="">
				<view class="b_text">
					当前余额
				</view>
				<view class="b_y">
					￥{{userInfo.balance}}
				</view>
			</view>
			<view class="b_btn" @click="log()">
				提现明细
			</view>
		</view>
		<view class="p-box">
			<view class="p_text">
				提现到银行卡
			</view>
			<view class="flex">
				<view :class="key==index?'p_c_a':'p_c'" v-for="(item,index) in  list" :key="index" @click="change(index,item)">
					{{item.cash_name}}
				</view>
			</view>
		</view>
		<view class="btn" @click="getCardMoney">
			立即提现到银行卡
		</view>
	</view>
</template>

<script>
	import * as UserApi from '@/api/user'
	import * as Api from '@/api/recovery'
	export default{
		data(){
			return{
				key:0,
				list:[],
				userInfo: {},
				cardInfo:{}
			}
		},
		onLoad() {
			this.getUserInfo();
			this.getCashList();
		},
		methods:{
			change(n,m){
				this.key=n
				this.cardInfo=m
				console.log(m)
			},
			log(){
				this.$navTo('pages/wallet/balance/log')
			},
			getUserInfo() {
			  const app = this
			  return new Promise((resolve, reject) => {
			    UserApi.info()
			      .then(result => {
			        app.userInfo = result.data.userInfo
			        resolve(app.userInfo)
			      })
			  })
			},
			
			getCashList(){
				const app = this
				return new Promise((resolve, reject) => {
				  Api.cashList()
				    .then(result => {
				      app.list = result.data.list
				      resolve(app.list)
				    })
				})
				
			},
			getCardMoney(){
				uni.navigateTo({
					url:'/pages/bank/bindIndex?amount='+this.cardInfo.amount
				})
				
			}
			
		}
	}
</script>

<style scoped>
	.flex{
		display: flex;
		flex-wrap: wrap;
	}
	.balance_b{
		width: 100%;
		height: 284rpx;
		padding: 70rpx 33rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: linear-gradient(0deg, #66B347 0%, #66B347 100%);
	}
	.btn{
		width: 686rpx;
		height: 88rpx;
		background: #66B347;
		border-radius: 44rpx;
		margin: 0 auto;
		text-align: center;
		color: #fff;
		line-height: 88rpx;
		font-size: 32rpx;
	}
	.b_text{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.b_btn{
		width: 194rpx;
		height: 75rpx;
		background: #FFB823;
		border-radius: 38rpx;
		line-height: 75rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.b_y{
		font-size: 60rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}
	
	.p-box{
		padding: 33rpx;
	}
	.p_text{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
	}
	
	.p_c{
		width: 309rpx;
		height: 178rpx;
		border: 1rpx solid #66B347;
		background: rgba(255,255,255,0.93);
		border-radius: 10rpx;
		line-height: 178rpx;
		text-align: center;
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #66B347;
		margin: 20rpx 16rpx;
	}
	.p_c_a{
		background: rgba(102,179,71,0.1);
		width: 309rpx;
		height: 178rpx;
		border: 1rpx solid #66B347;
		border-radius: 10rpx;
		line-height: 178rpx;
		text-align: center;
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #66B347;
		margin: 20rpx 16rpx;
	}
</style>